import { createApp } from 'vue'
import {ElCard} from "element-plus";

const app = createApp({
    components: {
        ElCard,
    },
    // `setup` 是一个特殊的钩子，专门用于组合式 API。
    setup() {
        const items = [
            {name: 'Rubik Cube', page: './pRubik.html', img: 'background-image: url("./assets/puzzle/rubik_classic.png")'},
            {name: 'Joined Rubik Cube', page: './pRubikJoined.html', img: 'background-image: url("./assets/puzzle/rubik_joined.png")'},
            {name: 'Mirror Rubik Cube', page: './pRubikMirror.html', img: 'background-image: url("./assets/puzzle/rubik_mirror.png")'},
            {name: 'Bagua Cube', page: './pBaguaCube.html', img: 'background-image: url("./assets/puzzle/bagua_cube.png")'},
            {name: 'Octo-Star Cube', page: './pOctoStarCube.html', img: 'background-image: url("./assets/puzzle/octo_star_cube.png")'},
            {name: 'Fake Rubik 333', page: './pFake3x3.html', img: 'background-image: url("./assets/puzzle/rubik_fake_333.png")'},
            {name: 'Roadblock', page: './pRoadblock.html', img: 'background-image: url("./assets/puzzle/road_block_v1.png")'},
            {name: 'LittleChop 24 Cube', page: './pLittleChop24.html', img: 'background-image: url("./assets/puzzle/littlechop24_cube.png")'},
            {name: 'Sun Cube', page: './pSunCube.html', img: 'background-image: url("./assets/puzzle/suncube.png")'},
            {name: 'Sun Cube Bandaged', page: './pSunBandaged.html', img: 'background-image: url("./assets/puzzle/sun_cube_bandaged.png")'},
            {name: 'Son Mum 2x2', page: './pSonMum2x2.html', img: 'background-image: url("./assets/puzzle/son_mum_2x2.png")'},
            {name: 'Son Mum 3x3', page: './pSonMum3x3.html', img: 'background-image: url("./assets/puzzle/son_mum_3x3_v1.png")'},
            {name: 'Son Mum 3x3 30°', page: './pSonMum3x3 30.html', img: 'background-image: url("./assets/puzzle/son_mum_3x3_30.png")'},
            {name: 'Son Mum 4x4', page: './pSonMum4x4.html', img: 'background-image: url("./assets/puzzle/son_mum_4x4.png")'},
            {name: 'Fisher Cuboid 446', page: './pFisherCuboid446.html', img: 'background-image: url("./assets/puzzle/fisher_cuboid_446.png")'},
            {name: 'Rubik335', page: './pRubik335.html', img: 'background-image: url("./assets/puzzle/rubik_335.png")'},
            {name: 'Helicopter Cube', page: './pHelicoptercube.html', img: 'background-image: url("./assets/puzzle/helicopter_cube.png")'},
            {name: 'Curvy Copter Cube', page: './pCurvyCopterCube.html', img: 'background-image: url("./assets/puzzle/curvy_copter.png")'},
            {name: 'CurvyCopter shallow', page: './pCurvyCopterShallowCut.html', img: 'background-image: url("./assets/puzzle/curvy_copter_shallowcut.png")'},
            {name: 'CurvyCopter deep', page: './pCurvyCopterDeep.html', img: 'background-image: url("./assets/puzzle/curvy_copter_deepcut.png")'},
            {name: 'CurvyCopter+', page: './pCurvyCopterPlus.html', img: 'background-image: url("./assets/puzzle/curvy_copter_plus.png")'},
            {name: 'Curvy+ Skewb', page: './pCurvyCopterPlusSkewb.html', img: 'background-image: url("./assets/puzzle/curvy_copter_plus_skewb.png")'},

            {name: 'Skewb Diamond', page: './pSkewbDiamond.html', img: 'background-image: url("./assets/puzzle/skewb_diamond.png")'},
            {name: 'Skewb Diamond 2', page: './pSkewbDiamond2.html', img: 'background-image: url("./assets/puzzle/skewb_diamond2.png")'},
            {name: 'Pyraminx', page: './pPyraminx.html', img: 'background-image: url("./assets/puzzle/pyraminx.png")'},
            {name: 'Megaminx', page: './pMegaminx.html', img: 'background-image: url("./assets/puzzle/megaminx.png")'},
            {name: 'Dodecahedron 2x2', page: './pDodecahedron2x2.html', img: 'background-image: url("./assets/puzzle/dodecahedron_2x2.png")'},
            {name: 'Skewb Square', page: './pSkewbsquare.html', img: 'background-image: url("./assets/puzzle/skew_sq_1.png")'},
            {name: 'Redi Cube', page: './pRediCube.html', img: 'background-image: url("./assets/puzzle/redi_cube.png")'},
            {name: 'Dino Cube', page: './pDino.html', img: 'background-image: url("./assets/puzzle/skewb_dino.png")'},
            {name: 'Skewb', page: './pSkewb.html', img: 'background-image: url("./assets/puzzle/skewb.png")'},
            {name: 'F-Skewb', page: './pFskewb.html', img: 'background-image: url("./assets/puzzle/fskewb.png")'},

            {name: 'Daisy Megaminx', page: './pDaisyMegaminx.html', img: 'background-image: url("./assets/puzzle/megaminx_daisy.png")'},
            {name: 'Starminx D cut', page: './pStarminxDeep.html', img: 'background-image: url("./assets/puzzle/starminx_deepcut.png")'},
            {name: 'Starminx', page: './pStarminx.html', img: 'background-image: url("./assets/puzzle/starminx_harder.png")'},
            {name: 'Starminx mini D cut', page: './pStarminxMiniDeep.html', img: 'background-image: url("./assets/puzzle/starminx_deep_cut.png")'},
            {name: 'Starminx mini', page: './pStarminxMini.html', img: 'background-image: url("./assets/puzzle/starminx_easiest.png")'},
            {name: 'Tangram', page: './pTangram.html', img: 'background-image: url("./assets/puzzle/rubik_tangram_7.png")'},
            {name: 'X cube', page: './pXcube.html', img: 'background-image: url("./assets/puzzle/rubik_fisher.png")'},
            {name: 'Mixup Rubik+', page: './pMixupRubikPlus.html', img: 'background-image: url("./assets/puzzle/rubik_mixup_plus.png")'},
            {name: 'Mixup Rubik Super', page: './pMixupRubikSuper3.html', img: 'background-image: url("./assets/puzzle/rubik_mixup_super.png")'},
            {name: 'Mixup Rubik+ 4', page: './pMixupRubikPlus4.html', img: 'background-image: url("./assets/puzzle/rubik_mixup_plus_4.png")'},
            {name: 'Mixup Rubik+ 443', page: './pMixupRubikPlus443.html', img: 'background-image: url("./assets/puzzle/rubik_mixup_plus_443.png")'},
            {name: 'Mixup Rubik FS 4x4', page: './pMixupFS_4x4x4.html', img: 'background-image: url("./assets/puzzle/rubik_mixup_fs4x4.png")'},
        ]
        return {
            items
        }
    },
    template: `
    <div class="flex flex-wrap gap-4 card-box cursor-pointer">
      <el-card v-for="(item, index) in items">
        <template #header>{{item.name}}</template>
        <a :href="item.page" target="_blank">
          <div class="center-cropped" :style="item.img"></div>
        </a>
      </el-card>

  </div>
  `
})
app.mount('#app')